<template>
  <div>
    <canvas></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  MeshBuilder,
  HemisphericLight,
  Color3,
  DynamicTexture,
  StandardMaterial
} from '@babylonjs/core'

onMounted(() => {
  const canvas = document.querySelector('canvas')! as HTMLCanvasElement
  // 创建引擎
  const engine = new Engine(canvas, true)
  // 创建场景
  const scene = new Scene(engine)
  // 创建相机
  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2.2,
    Math.PI / 2.5,
    15,
    new Vector3(0, 0, 0)
  )
  // 运用相机和画布关联起来
  camera.attachControl(canvas, true)
  // 添加灯光到场景中(环境灯)
  const light = new HemisphericLight('light', new Vector3(1, 1, 1), scene)
  // 创建box
  const faceColors = []
  faceColors[0] = Color3.Blue().toColor4()
  faceColors[1] = Color3.Teal().toColor4()
  faceColors[2] = Color3.Red().toColor4()
  faceColors[3] = Color3.Purple().toColor4()
  faceColors[4] = Color3.Green().toColor4()
  faceColors[5] = Color3.Yellow().toColor4()
  const boxP = MeshBuilder.CreateBox('boxp', { faceColors: faceColors }, scene)
  const boxChild = MeshBuilder.CreateBox('boxc', { faceColors: faceColors, size: 0.5 }, scene)
  // 设置父
  boxChild.parent = boxP

  // 自身的移动旋转不影响父
  boxChild.position.x = 0
  boxChild.position.y = 2
  boxChild.position.z = 0
  boxChild.rotation.x = Math.PI / 4
  // // 父的移动旋转影响子
  boxP.position.x = 2
  boxP.rotation.x = Math.PI / 4

  showAxis(5, scene)
  engine.runRenderLoop(() => {
    scene.render()
  })
  window.addEventListener('resize', function () {
    engine.resize()
  })
})
const showAxis = (size: number, scene: Scene) => {
  const makeTextPlane = (text: string, color: any, size: number) => {
    const dynamicTexture = new DynamicTexture('DynamicTexture', 50, scene, true)
    dynamicTexture.hasAlpha = true
    dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color, 'transparent', true)

    const planeMat = new StandardMaterial('TextPlaneMaterial', scene)
    planeMat.backFaceCulling = false
    planeMat.specularColor = new Color3(0, 0, 0)
    planeMat.diffuseTexture = dynamicTexture
    const plane = MeshBuilder.CreatePlane('TextPlane', { size })
    plane.material = planeMat
    return plane
  }

  const axisX = MeshBuilder.CreateLines('axisX', {
    points: [
      Vector3.Zero(),
      new Vector3(size, 0, 0),
      new Vector3(size * 0.95, 0.05 * size, 0),
      new Vector3(size, 0, 0),
      new Vector3(size * 0.95, -0.05 * size, 0)
    ]
  })
  axisX.color = new Color3(1, 0, 0)
  const xChar = makeTextPlane('X', 'red', size / 10)
  xChar.position = new Vector3(0.9 * size, -0.05 * size, 0)

  const axisY = MeshBuilder.CreateLines('axisY', {
    points: [
      Vector3.Zero(),
      new Vector3(0, size, 0),
      new Vector3(-0.05 * size, size * 0.95, 0),
      new Vector3(0, size, 0),
      new Vector3(0.05 * size, size * 0.95, 0)
    ]
  })
  axisY.color = new Color3(0, 1, 0)
  const yChar = makeTextPlane('Y', 'green', size / 10)
  yChar.position = new Vector3(0, 0.9 * size, -0.05 * size)

  const axisZ = MeshBuilder.CreateLines('axisZ', {
    points: [
      Vector3.Zero(),
      new Vector3(0, 0, size),
      new Vector3(0, -0.05 * size, size * 0.95),
      new Vector3(0, 0, size),
      new Vector3(0, 0.05 * size, size * 0.95)
    ]
  })
  axisZ.color = new Color3(0, 0, 1)
  const zChar = makeTextPlane('Z', 'blue', size / 10)
  zChar.position = new Vector3(0, 0.05 * size, 0.9 * size)
}
</script>

<style></style>
